<template>
    <div class="animated-tab-bar-menu" :style="{ 'width': menuWidth }">
        <div class="animated-tab-bar-menu-border" :style="{ 'left': borderLeft }"></div>
        <button :class="i === lastIndex ? activeItemClass : itemClass" v-for="(item, i) in buttonList"
            :style="{ '--bgColorItem': item.bgColorItem, '--i': i }" @click="emitButton(item.param, i)"
            :title="item.title" v-html="item.svg"></button>
    </div>

    <div class="animated-tab-bar-svg-container">
        <svg viewBox="0 0 60 60">
            <clipPath id="animated-tab-bar-menu">
                <circle cx="30" cy="30" r="30" />
            </clipPath>
        </svg>
        <svg viewBox="0 0 100 30">
            <clipPath id="animated-tab-bar-border">
                <path d="M0,0 C20,0 30,20 50 20C70,20 80,0 100 0H0Z" />
            </clipPath>
        </svg>
    </div>
</template>

<script>
export default {
    name: "AnimatedTabBar",
    props: ["buttons"],
    emits: ["buttonDown"],
    data() {
        return {
            lastIndex: -1,
            menuWidth: "60px",
            borderLeft: "calc(50% - 50px)",
            itemClass: "animated-tab-bar-menu-item",
            activeItemClass: "animated-tab-bar-menu-item animated-tab-bar-active",
            buttonList: [
                {
                    bgColorItem: "#998181",
                    title: "图标",
                    param: "showIcon",
                    svg: `<svg viewBox="0 0 50 50" stroke="white"
    fill="transparent"
    stroke-width="2px"
    stroke-dasharray="40, 10">
    <path d="M25,40 C45,30 45,27 45,20 C45,10 25,10 25,20 C25,10 5,10 5,20 C5,27 5,30 25,40 Z" />
</svg>`,
                },
                {
                    bgColorItem: "#ff8c00",
                    title: "按钮",
                    param: "showButton",
                    svg: `<svg viewBox="0 0 50 50" stroke="white"
    fill="transparent"
    stroke-width="2px"
    stroke-dasharray="40, 10">
    <rect x="15" y="10" width="20" height="5" />
    <rect x="20" y="15" width="10" height="10" />
    <rect x="10" y="25" width="30" height="15" />
</svg>`,
                },
                {
                    bgColorItem: "#f54888",
                    title: "特效",
                    param: "showEffect",
                    svg: `<svg viewBox="0 0 50 50" stroke="white"
    fill="transparent"
    stroke-width="2px"
    stroke-dasharray="40, 10">
    <circle cx="25" cy="25" r="15" />
    <circle cx="30" cy="20" r="8" />
    <circle cx="12" cy="38" r="4" />
</svg>`,
                },
                {
                    bgColorItem: "#4343f5",
                    title: "样式",
                    param: "showStyle",
                    svg: `<svg viewBox="0 0 50 50" stroke="white"
    fill="transparent"
    stroke-width="2px"
    stroke-dasharray="40, 10">
    <path d="M10,10 h30 v30 H10 V40 Z" />
    <path d="M10,20 h30" />
    <path d="M20,20 v20" />
</svg>`,
                }
            ],
        }
    },
    computed: {},
    methods: {
        emitButton(param, index) {
            let isSame = this.lastIndex == index;
            if (isSame) {
                this.borderLeft = "calc(50% - 50px)";
                this.lastIndex = -1;
            } else {
                this.borderLeft = 30 + 80 * (index + 1) - 40 - 50 + "px";
                this.lastIndex = index;
            }
            this.$emit("buttonDown", param);
        },
        //初始化标签栏
        initBar(buttonList) {
            this.menuWidth = 60 + 80 * buttonList.length + "px";
            this.lastIndex = -1;
            this.borderLeft = "calc(50% - 50px)";
        }
    },
    created() {
        if (this.$props.buttons) {
            this.buttonList = this.$props.buttons;
        }
        this.initBar(this.buttonList);
    },
    mounted() {

    }
}
</script>

<style scoped>
.animated-tab-bar-menu {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(36, 35, 35);
    position: relative;
}

.animated-tab-bar-menu-border {
    position: absolute;
    width: 100px;
    height: 30px;
    background-color: rgb(36, 35, 35);
    bottom: -30px;
    left: calc(50% - 50px);
    clip-path: url(#animated-tab-bar-border);
    transition: 0.5s;
}

.animated-tab-bar-menu-item {
    width: 60px;
    height: 60px;
    user-select: none;
    cursor: pointer;
    margin: 0 10px;
    padding: 0;
    border: 0;
    position: relative;
    background-color: transparent;
    transition: 0.5s;
    clip-path: url(#animated-tab-bar-menu);
}

.animated-tab-bar-menu-item:hover {
    background-color: var(--bgColorItem);
    transform: scale(1.1);
}

.animated-tab-bar-active {
    background-color: var(--bgColorItem);
    transform: scale(1.1) translateY(10px);
}

.animated-tab-bar-svg-container {
    width: 0;
    height: 0;
}
</style>

<style>
.animated-tab-bar-menu-item:hover>svg {
    animation: strok 1s ease-in-out reverse;
}

@keyframes strok {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: 50;
    }
}
</style>